<template>
  <el-container class="app-flex-1 app-flex" style="overflow: auto">
    <el-aside :width="isCollapse ? '0' : '150px'" style="background-color: #24252c;transition: all .1s linear">
      <el-menu
        :collapse="isCollapse"
        :default-active="$route.path"
        router
        mode="verticla"
        background-color="#24252c"
        active-text-color="#ffd04b"
        text-color="#fff"
      >
        <template v-for="menu in userMenuList">
          <el-submenu
            v-if="!menu.path"
            :key="menu.id"
            :index="menu.id + ''"
            :show-timeout="99999999"
            :hide-timeout="99999999"
          >
            <template slot="title">
              <i :class="menu.icon" />
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item v-for="item in menu.children" :key="item.id" :index="item.path"><i :class="item.icon" />{{ item.name }}</el-menu-item>
          </el-submenu>
          <el-menu-item
            v-else
            :key="menu.id"
            :index="menu.path"
          >
            <i :class="[menu.name === '权限管理'? 'iconfont icon-quanxian mr-2 ml-1' : menu.icon]" />
            <span slot="title">{{ menu.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-container class="app-white app-flex-1">
      <router-view v-if="userMenuList.length" />
    </el-container>
  </el-container>
</template>

<script>
import Vue from 'vue'
// import { getUserMenuList } from '@/api/org-user'
import { mapGetters } from 'vuex'
export default Vue.extend({
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userInfo: null,
      userMenuList: [{
        id: 0,
        icon: '',
        name: '排行榜管理',
        path: '/manage/menu/ranking-manage'
      },{
        id: 1,
        icon: '',
        name: '比赛管理',
        path: '/manage/menu/competition-manage'
      },{
        id: 2,
        icon: '',
        name: '预约管理',
        path: '/manage/menu/appointment-manage'
      },{
        id: 3,
        icon: '',
        name: '场地管理',
        path: '/manage/menu/place-manage'
      },{
        id: 4,
        icon: '',
        name: '优惠兑换码',
        path: '/manage/menu/redeem-code'
      }]
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
    ])
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    console.log(this.userInfo)
    // if (this.userInfo.role === 1) {
    //   this.userMenuList.unshift({
    //     id: 2,
    //     icon: '',
    //     name: '账号管理',
    //     path: '/i/user'
    //   })
    // }
  },
  methods: {
    selectMenu(index, indexPath) {
      this.currentMenuId = index
    },
    goToNews(artical) {
      window.open(artical.url)
    }
  }
})
</script>

<style lang="scss" scoped>
// ::v-deep .el-menu-item {
//     padding: 0 20px;
// }
::v-deep .el-menu {
    border-right: none;
}
::v-deep .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}
::v-deep .el-submenu__icon-arrow {
  -webkit-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
}
// ::v-deep .el-menu {
//   border-right: 0;
//   background: transparent;
// }
// ::v-deep .el-menu-item:focus, .el-menu-item:hover {
//   color: #fff;
//   background: #17181c;
// }
// ::v-deep .el-menu-item.is-active {
//     color: #fff;
// }
::v-deep .el-collapse-item__arrow {
    margin: 0 12px;
}

</style>>

